<template>
  <v-form
    ref="form"
    v-model="valid"
    lazy-validation
  >
    <v-container>
      <v-row>
        <v-col
          cols="12"
          md="4"
        >
          <v-text-field
            v-model="email"
            :rules="emailRules"
            label="E-mail"
            required
          ></v-text-field>
        </v-col>
      </v-row>
      <v-btn
        :disabled="!valid"
        color="success"
        class="mr-4"
        @click="validate"
      >
        Validate
      </v-btn>

      <v-btn
        color="error"
        class="mr-4"
        @click="reset"
      >
        Reset Form
      </v-btn>

      <v-btn
        color="warning"
        @click="resetValidation"
      >
        Reset Validation
      </v-btn>
    </v-container>
  </v-form>
</template>

<script lang="ts">
import { VForm } from '@/types'
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Login extends Vue {
  username = '';
  nameRules = [
    (v: any) => !!v || 'Name is required',
    (v: string | any[]) =>
      (v && v.length <= 10) || 'Name must be less than 10 characters'
  ];

  passwd = '';
  email = '';
  valid = true;
  emailRules = [
    (v: any) => !!v || 'E-mail is required',
    (v: string) => /.+@.+/.test(v) || 'E-mail must be valid'
  ];

  get form(): VForm {
    return (this.$refs as any).form
  }

  validate() {
    this.form.validate()
  }

  reset() {
    this.form.reset()
  }

  resetValidation() {
    this.form.resetValidation()
  }
}
</script>

<style scoped>
</style>
